require('../css/index.less');

document.ready(function () {
    console.log(111);

    // 进入首页   调用生成footer
    utils.createFooter('index');

    // banner图
    const URL = 'http://23.224.181.169:8098';
    let swiperD = document.querySelector('.swiper-wrapper');

    let user = JSON.parse(localStorage.getItem('user'));
    console.log(user);
    http.get('/home/getBannerList?id=' + user.id, (res) => {
        if (res.code === 0) {
            let html = '';
            res.data.forEach(item => {
                html += `
                <div class="swiper-slide">
                    <img src="${URL}${item.img}" alt="">
                </div>
                `
            });
            swiperD.innerHTML = html;
            // 顶部轮播
            var mySwiper = new Swiper('.swiper', {
                loop: true, // 循环模式选项
                // 分页器
                pagination: {
                    el: '.swiper-pagination',
                },
            })
        }
    });
    // 导航列表
    let DhList = document.querySelector('.DhList');
    let id = user.id;

    // ajax请求
    http.ajax({
        type: 'get', //get方法 
        data: { id: id },
        url: 'http://23.224.181.169:8098/home/getNavList',
        success: function (res) {
            console.log(res.data);
            // 循环生成
            for (let i = 0; i < res.data.length; i++) {
                // 创建一个div
                let div = document.createElement('div');
                div.className = 'item'
                //获取图片标题
                div.innerHTML = `   
                <img src="http://23.224.181.169:8098${res.data[a].img}" alt="">
                <div class="navtext">${res.data[a].title}</div>
                `
                // 追加
                DhList.appendChild(div);
            }
        }
    });

    // 众筹
    let titleText = document.querySelector('.titleText'); //商品标题
    let moneyText = document.querySelector('.moneyText'); //商品价格
    let weiImgBox = document.querySelector('.imgBox img'); //商品图片
    let ZhiChi = document.querySelector('.ZHiChi');        // 支持人数
    let WanCheng = document.querySelector('.WanCheng');    //完成度

    http.ajax({
        type: 'get',
        data: {
            id: id
        },
        url: 'http://23.224.181.169:8098/home/getHomeGoods',
        success: function (res) {
            console.log(res);
            let Name = res.data.joinGoods[0];
            titleText.textContent = Name.title;
            moneyText.textContent = `￥${Name.present_price}`;
            weiImgBox.src = `http://23.224.181.169:8098${Name.img}`;
            ZhiChi.textContent = Name.join_person;
            WanCheng.textContent = Name.total_person;
            // 循环生成
            for (let a = 1; a < res.data.joinGoods.length; a++) {
                let div = document.createElement('div');
                div.className = 'weileft'
                div.innerHTML = `
                <div class="weileftbiaotia">${res.data.joinGoods[a].title}</div>
                <div class="weileftimgbox">
                    <div class="weileftjiagea">￥${res.data.joinGoods[a].present_price}</div>
                    <div class="weileftimg">
                        <img class="weileftimga" src="http://23.224.181.169:8098${res.data.joinGoods[a].img}" alt="">
                    </div>
                </div>
                <div>
                    <div class="jingdutiaoText"><span class="re">热</span>支持人数 <span class="joinPersona">${res.data.joinGoods[a].join_person} </span></div>
                    <div class="jingdutiaoBox">
                        <div class="jingdutiao jingdutiaoa" style="width: ${res.data.joinGoods[a].total_person}%;"></div>
                    </div>
                </div>
                `
                weishopMinBox.appendChild(div);
            };
            // 好物榜块
            let hwbBox = document.querySelector('.hwbBox')
                for (let a = 0; a < res.data.perfectGoods.length; a++) {
                    let div = document.createElement('div');
                    div.className = 'hpbox'
                    div.innerHTML = `
                    <div class="hpimgs">
                    <img class="hpimg" src="http://23.224.181.169:8098${res.data.perfectGoods[a].img}" alt="">
                </div>
                <div class="hpboxmin">
                    <div class="hpbiaoti">${res.data.perfectGoods[a].tags}</div>
                    <div class="yundongfuzhuang">${res.data.perfectGoods[a].title}</div>
                    <div class="haopinglv">${res.data.perfectGoods[a].type}</div>
                </div>
                    `
                    hwbBox.appendChild(div);
                };
                // 小
                let swiperWrapper2 = document.querySelector('.swiper-wrapper2');
                // 循环生成
                for (let a = 0; a < res.data.hotGoods.length; a++) {
                    let div = document.createElement('div');
                    div.className = 'swiper-slide'
                    div.innerHTML = `
                    <div class="Slide1">
                    <div class="SlideImg">
                        <img src="http://23.224.181.169:8098${res.data.hotGoods[a].img}" alt="">
                    </div>
                    <div class="Slidedesc">${res.data.hotGoods[a].desc}</div>
                    <div class="Slidetitle">${res.data.hotGoods[a].title}</div>
                </div>
                    `
                    // 追加页面
                    swiperWrapper2.appendChild(div);
                };
                // 小轮播
                var swipers = new Swiper(".mySwipers", {
                    slidesPerView: 3,
                    spaceBetween: 30,
                    freeMode: true,
                    pagination: {
                        el: ".swiper-paginations",
                        clickable: true,
                    },
                });

                // 轮播图
                var swipers = new Swiper(".mySwiperss", {
                    slidesPerView: 3,
                    spaceBetween: 30,
                    freeMode: true,
                    pagination: {
                        el: ".swiper-paginations",
                        clickable: true,
                    },
                });
                let swiperWrapper3 = document.querySelector('.swiper-wrapper3');
                // 循环生成
                for (let a = 0; a < res.data.timeGoods.length; a++) {
                    let div = document.createElement('div');
                    div.className = 'swiper-slide'
                    div.innerHTML = `
                    <div class="mssp">
                    <img class="msimg" src="http://23.224.181.169:8098${res.data.timeGoods[a].img}" alt="">
                    <div> <span class="msCurrentPrice">￥${res.data.timeGoods[a].current_price}</span><span class="msOldrice">￥${res.data.timeGoods[a].old_price}</span> </div>
                </div>
                    `
                    swiperWrapper3.appendChild(div);
                };
            }
        });
        // 推荐商品块
        let tj = document.querySelector('.tjMin');
        http.ajax({
            type: 'get',
            data: {
                id: id},
            url: 'http://23.224.181.169:8098/home/getRecommendList',
            success: function(res) {
                //循环生成
                for (let a = 0; a < res.data.length; a++) {
                let div = document.createElement('div');
                div.className = 'tjBox'
                div.innerHTML = `
                <img src="http://23.224.181.169:8098${res.data[a].img}" alt="">
                <div class="tjText">
                <div>${res.data[a].title}</div>
                <div>${res.data[a].desc}</div>
                <div>￥ <span>${res.data[a].price}</span></div>
                </div>
                `
                // 追加到页面
                tj.appendChild(div);
                }
            }
        });
})